@import '../../../themes/basic/base-all.less';

:host {
  --ti-switch-height: var(--ti-common-size-5x);
  --ti-switch-width: 38px;
  --ti-switch-pointer-width: var(--ti-common-size-4x);
  --ti-switch-pointer-space: 2px;
  --ti-switch-pointer-explanation-space: var(--ti-common-space-6);
}

:host.ti3-switch-container {
  display: inline-block;
  height: var(--ti-switch-height);
}

// 1.组件通用样式:与hover、focused、disabled等状态无关
.ti3-switch {
  width: var(--ti-switch-width);
  height: var(--ti-switch-height);
  display: inline-block;
  position: relative;
  cursor: pointer;
  .user-select(none);

  .ti3-switch-track {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: var(--ti-switch-height);
    .box-sizing (border-box);
  }

  .ti3-switch-pointer {
    display: inline-block;
    position: absolute;
    top: calc((var(--ti-switch-height) - var(--ti-switch-pointer-width)) / 2);
    z-index: 8;
    width: var(--ti-switch-pointer-width);
    height: var(--ti-switch-pointer-width);
    background: var(--ti-common-color-bg-white-normal);
    border-radius: var(--ti-common-border-radius-3);
    .box-sizing (border-box);
  }

  &.ti3-switch-off {
    & .ti3-switch-track {
      background: var(--ti-common-color-bg-secondary);
    }

    & .ti3-switch-pointer {
      left: var(--ti-switch-pointer-space);
    }
  }

  &.ti3-switch-on {
    & .ti3-switch-track {
      background: var(--ti-common-color-bg-emphasize);
    }

    & .ti3-switch-pointer {
      left: calc(100% - var(--ti-switch-pointer-space) - var(--ti-switch-pointer-width));
    }
  }

  &.ti3-switch-with-explanation {
    width: auto;

    .ti3-switch-track {
      width: auto;
    }

    .ti3-switch-explanation-container {
      display: inline-block;
      line-height: var(--ti-switch-height);
      color: var(--ti-common-color-text-white);
      font-size: var(--ti-common-font-size-base);
      font-weight: var(--ti-common-font-weight-4);
    }

    &.ti3-switch-off {
      .ti3-switch-explanation-container {
        padding-left: calc(var(--ti-switch-pointer-explanation-space) + var(--ti-switch-pointer-width) + var(--ti-switch-pointer-space));
        padding-right: var(--ti-common-space-10);
      }
    }

    &.ti3-switch-on {
      .ti3-switch-explanation-container {
        padding-left: var(--ti-common-space-10);
        padding-right: calc(var(--ti-switch-pointer-explanation-space) + var(--ti-switch-pointer-width) + var(--ti-switch-pointer-space));
      }
    }
  }
}

// 2.灰化状态下的样式
.ti3-switch[disabled] {
  cursor: not-allowed;

  & .ti3-switch-pointer {
    background: var(--ti-common-color-bg-disabled);
  }

  &.ti3-switch-on {
    & .ti3-switch-track {
      background-color: var(--ti-common-color-bg-light-emphasize);
    }
  }

  &.ti3-switch-off {
    & .ti3-switch-track {
      background-color: var(--ti-common-color-bg-dark-disabled);
    }
  }
}

/************************************动效************************************************************************/
.ti3-switch.ti3-switch-animation {
  .ti3-switch-track,
  .ti3-switch-pointer {
    transition: all 0.25s linear;
  }
}
/************************************动效************************************************************************/
